<template>
  <div style="background-color: #f6f6f6">
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="form" style="padding-left: 20px;">
          <el-form :inline="true" :model="answererKeywordToSearch" class="dw-form-inline" size="medium">
            <el-form-item class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="value2"
                value-format="yyyy-MM-dd"
                type="daterange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-button type="primary" @click="searchSuggestionByDate()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-title">
            <el-row :span="24" type="flex" justify="space-between" align="middle">
              <el-col :span="4"><h3>意见列表</h3></el-col>
            </el-row>
          </div>
          <el-table :data="suggestionData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"
                    border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" width="150" type="index" sortable></el-table-column>
<!--            ！！！-->
            <el-table-column label="产品满意度" width="200" prop="first"></el-table-column>
            <el-table-column label="产品可推广度" width="250" prop="third"></el-table-column>
            <el-table-column label="意见时间" prop="createdDate">
<!--              <template v-slot="scope">-->
<!--                {{formatDate(scope.row.createdDate)}}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-tooltip effect="dark" content="查看意见详情" placement="top">
                  <el-button size="medium" class="el-icon-aim" type="primary" circle
                             @click="checkSuggestion(scope.$index)"></el-button>
                </el-tooltip>
              </template>

            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :page-size="pageSize"
              :current-page="currentPage"
              :total="total"
              :page-sizes="[5,10,20,50]"
              background
              layout="sizes,prev, pager, next"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
<!--      ！！！-->
      <el-dialog title="意见详情" :visible.sync="suggestionFormVisible" style="padding-top: 0px" append-to-body>
        <el-form :model="suggestionToOperate" label-position="top">
          <el-form-item label="产品满意度" :label-width="formLabelWidth" prop="first">
            <el-input v-model="suggestionToOperate.first" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户对于产品满意度的意见" :label-width="formLabelWidth" prop="second">
            <el-input type="textarea" v-model="suggestionToOperate.second" disabled></el-input>
          </el-form-item>
          <el-form-item label="产品可推广度" :label-width="formLabelWidth" prop="third">
            <el-input v-model="suggestionToOperate.third" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户关于产品推广所提出的意见" :label-width="formLabelWidth" prop="fouth">
            <el-input type="textarea" v-model="suggestionToOperate.fouth" disabled ></el-input>
          </el-form-item>
          <el-form-item label="用户对整个产品提出的意见" :label-width="formLabelWidth" prop="last">
            <el-input v-model="suggestionToOperate.last" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户提交意见时间" :label-width="formLabelWidth" prop="createdDate">
            <el-date-picker v-model="suggestionToOperate.createdDate" disabled></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="suggestionFormVisible = false">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: "suggestionBox",
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: [],
      answererKeywordToSearch: '',
      suggestionToOperate: {
        id: '',
        first: '',
        second: '',
        third: '',
        fouth: '',
        last: '',
        createdDate: ''
      },
      suggestionData: [
        {first: '4',second: '',third: '4.5',fouth: '',last: '无',createdDate: '2022-11-9'},
        {first: '4',second: '',third: '3.5',fouth: '',last: '无',createdDate: '2022-11-9'},
        {first: '5',second: '',third: '4',fouth: '',last: '无.',createdDate: '2022-11-9'},
        {first: '4.5',second: '',third: '4.5',fouth: '',last: '无..',createdDate: '2022-11-9'},
        {first: '2',second: '。。。',third: '2.5',fouth: '。。。',last: '。。。',createdDate: '2022-11-10'},
        {first: '2',second: '。。。',third: '4',fouth: '',last: '。。。',createdDate: '2022-11-10'},
      ],
      suggestionBuffer:[
        {first: '4',second: '',third: '4.5',fouth: '',last: '无',createdDate: '2022-11-9'},
        {first: '4',second: '',third: '3.5',fouth: '',last: '无',createdDate: '2022-11-9'},
        {first: '5',second: '',third: '4',fouth: '',last: '无.',createdDate: '2022-11-9'},
        {first: '4.5',second: '',third: '4.5',fouth: '',last: '无..',createdDate: '2022-11-9'},
        {first: '2',second: '。。。',third: '2.5',fouth: '。。。',last: '。。。',createdDate: '2022-11-10'},
        {first: '2',second: '。。。',third: '4',fouth: '',last: '。。。',createdDate: '2022-11-10'},
      ],
      pageSize: 5,
      currentPage: 1,
      total: 1,

      fileList: [],

      suggestionFormVisible: false,

      formLabelWidth: '80px',

    }
  },
  methods: {
    comparedate(date1, date2) {
      let oDate1 = new Date(date1);
      let oDate2 = new Date(date2);
      if (oDate1.getTime() == oDate2.getTime()) {
        return true;
      } else if(oDate1.getTime() > oDate2.getTime()){
        return true;
      }
      else {
        return false;
      }
    },
    formatDate(date){
      return DateFormat(date)
    },
    searchSuggestionByDate() {
      let data = []
      for (let i = 0 ;i < this.suggestionBuffer.length;i++){
        let d1 = this.suggestionBuffer[i].createdDate
        let d2 = this.value2[0]
        let d3 = this.value2[1]
        if (this.comparedate(d1,d2) && this.comparedate(d3,d1)){
          data.push(this.suggestionBuffer[i])
        }
      }
      this.suggestionData = data
    },
    checkSuggestion(index) {
      this.cleanSuggestionBuffer()
      let dataIndex = index + this.pageSize * (this.currentPage - 1)
      this.suggestionToOperate.first = this.suggestionData[dataIndex].first
      this.suggestionToOperate.second = this.suggestionData[dataIndex].second
      this.suggestionToOperate.third = this.suggestionData[dataIndex].third
      this.suggestionToOperate.fouth = this.suggestionData[dataIndex].fouth
      this.suggestionToOperate.last = this.suggestionData[dataIndex].last
      this.suggestionToOperate.createdDate = this.suggestionData[dataIndex].createdDate
      this.suggestionFormVisible = true
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
    },
    cleanSuggestionBuffer() {

      this.suggestionToOperate.first = ''
      this.suggestionToOperate.second = ''
      this.suggestionToOperate.third = ''
      this.suggestionToOperate.fouth = ''
      this.suggestionToOperate.last = ''
      this.suggestionToOperate.createdDate = ''
    }
  }
}
</script>

<style scoped>
.form {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.table {
  background: white;
  padding: 20px;
}

.pagination {
  padding-top: 20px;
  text-align: right;
}
</style>
